<!--
 * @FileDescription 视角
 * @Author lz
 * @Date 20230530 11:45:10
 * @LastEditors lz
 * @LastEditTime 20230530 11:45:10
-->
<template>
  <div class="viewBox">
    <div
      class="BlackSpot"
      v-for="(item, index) in HomeContent.Default.ViewData.value"
      @click="SwitchView(item.Id)"
    >
      <a-button>{{ item.Name }}</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";
import {
  reactive,
  ref,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onUnmounted,
  StyleValue,
} from "vue";
import HomeContent from "../HomeContent";
import MessageCode from "../MessageCode";
import OrbitCameraComponent from "../OrbitCameraComponent";
const state = reactive({});
async function SwitchView(Id: any) {
  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.VIEW_DATA_CONFIG,
      `${Id}`
    )
  );
  console.log(JSON.parse(newArr.Content).Result);
  let ValData = JSON.parse(newArr.Content).Result;
  await OrbitCameraComponent.Default.UpdateV2Async(
    ValData.TargetContainer,
    ValData.Horizontal,
    ValData.Vertical,
    ValData.Distance,
    ValData.MinDistance,
    ValData.MaxDistance,
    ValData.VerticalAngleMax,
    ValData.VerticalAngleMin,
    1,
    1,
    1,
    ValData.HorizontalAngleMax,
    ValData.HorizontalAngleMin
  );
}
onMounted(async () => {});
</script>

<style scoped>
.viewBox {
  position: absolute;
  right: 0;
  bottom: 106px;
  height: 480px;
  background-color: #fff;
  border-radius: 16px;
  text-align: center;
  padding-top: 20px;
  box-shadow: 0 0 20px #666;
}

.BlackSpot {
  color: #fff;
  margin-bottom: 8px;
}
:deep().ant-btn {
  border: none;
}
</style>
